<template>
	<view class="dynamic base-maxwidth">
		<top-nav
			:back="myback" 
			:topMainBackGroundColor="topMainBackGroundColor" 
			:navMarginTop="navMarginTop"
			:topBackgroundColor="topBackgroundColor"
			:topHeight="topHeight">
			<view class="input-container">
				<uni-easyinput v-model="inputValue" placeholder="请输入" @click="inputOnclik" :suffixIcon="suffixIcon"/>
			</view>
		</top-nav>
		<view class="content">
			<tab-control
				:options="options"
				:color="color"
				@getTab="getTab">
				<moment-list
					:tabIndex="tabIndex"
					:momentList="momentList"></moment-list>
			</tab-control>
		</view>
	</view>
</template>

<script>
	import topNav from '@/components/topnav/topNav.vue'
	import momentList from '@/pages/dynamic/cpns/momentList.vue'
	import tabControl from '@/components/tabControl/tabControl.vue'
	export default {
		components: {
			topNav,
			momentList,
			tabControl
		},
		data() {
			return {
				myback: {
					show: false
				},
				inputValue: '',
				suffixIcon: 'search',
				topHeight: 50,
				statusBarHeight: 0,
				// 导航栏高度
				backgroundColor: 'rgba(255,255,255,1)',
				topBackgroundColor: '#fff',
				topMainBackGroundColor: '#fff',
				userId: Number,
				// 导航栏距离状态栏的高度
				navMarginTop: 0,
				// 选项卡
				options: [
					{ text: '推荐' },
					{ text: '最新' },
					{ text: '热门' }
				],
				color: '#fe4891',
				tabIndex: 0,
				momentList: [
					{
						id: 1,
						username: 'Gigibang',
						avatar:'https://img.zcool.cn/community/01654e5c824404a80120af9a9b6667.jpg@2o.jpg' ,
						pulish_time: '04-09',
						images: [
							'https://img.zcool.cn/community/01654e5c824404a80120af9a9b6667.jpg@2o.jpg',
							'https://tse1-mm.cn.bing.net/th/id/OIP-C.RGmKDveLMo2Ml8YEzYGtKgHaEo?w=280&h=180&c=7&r=0&o=5&pid=1.7'
						],
						title: '我是标题1',
						desc: '描述描述描述描述描述描述描述描ddddddddddddddddddddd述1',
					}, 
					{
						id: 2,
						username: '刘德华',
						images: [
							'https://tse1-mm.cn.bing.net/th/id/OIP-C.RGmKDveLMo2Ml8YEzYGtKgHaEo?w=280&h=180&c=7&r=0&o=5&pid=1.7'
						],
						title: '我是标题2',
						pulish_time: '04-09',
						desc: '描述描述描述描述描述描述描述描述2',
						avatar:'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215388977.jpg',
					}, 
					{
						id: 3,
						username: '郭富城',
						images: [
							'https://img.zcool.cn/community/01654e5c824404a80120af9a9b6667.jpg@2o.jpg',
							'https://tse1-mm.cn.bing.net/th/id/OIP-C.RGmKDveLMo2Ml8YEzYGtKgHaEo?w=280&h=180&c=7&r=0&o=5&pid=1.7',
							'https://img.chongshe.cn/5164168ff42796c7.jpg'
						],
						title: '我是标题3', 
						pulish_time: '04-09',
						desc: '描述描述描述描述描述描述描述描述3',
						avatar:'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215388977.jpg' ,
					}, 
					{
						id: 4,
						username: '郭富城',
						images: [
							'https://img.zcool.cn/community/016c325543065e0000019ae909489a.jpg@1280w_1l_2o_100sh.jpg',
							'https://img.zcool.cn/community/01654e5c824404a80120af9a9b6667.jpg@2o.jpg',
							'https://tse1-mm.cn.bing.net/th/id/OIP-C.RGmKDveLMo2Ml8YEzYGtKgHaEo?w=280&h=180&c=7&r=0&o=5&pid=1.7'
						],
						title: '我是标题4',
						pulish_time: '04-09',
						desc: '描述描述描述描述描述描述描述描述4',
						avatar:'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215388977.jpg' ,
					}, 
					{
						id: 5,
						username: '黎明',
						images: [
							'https://tse1-mm.cn.bing.net/th/id/OIP-C.EmFzJhy6p2uzHfFip_NaIAHaKX?pid=ImgDet&rs=1',
							'https://img.zcool.cn/community/01654e5c824404a80120af9a9b6667.jpg@2o.jpg',
							'https://tse1-mm.cn.bing.net/th/id/OIP-C.RGmKDveLMo2Ml8YEzYGtKgHaEo?w=280&h=180&c=7&r=0&o=5&pid=1.7'
						],
						title: '我是标题5',
						pulish_time: '04-09',
						desc: '描述描述描述描述描述描述描述描述5',
						avatar:'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215388977.jpg' ,
					}, 
					{
						id: 6,
						username: '成龙',
						images: [
							'https://img.zcool.cn/community/010e415d284bb9a80120b5ab1c1aba.jpg@1280w_1l_2o_100sh.jpg',
							'https://img.zcool.cn/community/01654e5c824404a80120af9a9b6667.jpg@2o.jpg',
							'https://tse1-mm.cn.bing.net/th/id/OIP-C.RGmKDveLMo2Ml8YEzYGtKgHaEo?w=280&h=180&c=7&r=0&o=5&pid=1.7'
						],
						title: '我是标题6',
						pulish_time: '04-09',
						desc: '描述描述描述描述描述描述描述描述6',
						avatar:'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215388977.jpg' ,
					}, 
					{ 
						id: 7,
						username: '吴彦祖',
						images: [
							'https://img.zcool.cn/community/0156ab5b418935a80120b95992188b.jpg@1280w_1l_2o_100sh.jpg',
							'https://img.zcool.cn/community/01654e5c824404a80120af9a9b6667.jpg@2o.jpg',
							'https://tse1-mm.cn.bing.net/th/id/OIP-C.RGmKDveLMo2Ml8YEzYGtKgHaEo?w=280&h=180&c=7&r=0&o=5&pid=1.7'
						],
						title: '我是标题7',
						pulish_time: '04-09',
						desc: '描述描述描述描述描述描述描述描述7',
						avatar:'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215388977.jpg' ,
					},
					]
			}
		},
		methods: {
			getTab(event, index) {
				this.tabIndex = index 
				// if(index == 1) {
				// 	this.momentList = []
				// }
				// index: 0 推荐  1最新 2最热
				console.log('event',event,'index',index)
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		background-color: #f8f8f8;
		margin: 0 0 0 -20rpx;
	}
	
	.input-container {
		margin-left: 20rpx;
		width: 66.6vw;
		background: linear-gradient();
		border-radius: 24rpx;
	}
	
	/deep/.input-container {
		// height: 25px;
		.is-input-border {
			height: 32px;
			border-radius: 24rpx!important;
		}
	}
	
	/deep/ .scroll-container {
		.scroll-item .tab-item {
			flex-grow: 0!important;
			width: 100rpx;
		}
		
		// .underline {
		// 	width: 100rpx!important;
		// }
	}
</style>